﻿<template>
    <div class="page-header" v-if="visible">
        <div class="left" v-if="allowBack">
            <el-icon style="margin: 10px 2px; font-size: 20px; color: #409efc; font-weight: bolder;"
                @click="$emit('goback')">
                <ArrowLeftBold />
            </el-icon>
        </div>
        <div class="tree-icon" v-if="allowTree" >
            <el-icon style="font-size: 20px; color: #409efc" @click="$emit('tree-click')">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor" d="M1102.769231 630.153846V393.846154H551.384615v78.769231H236.307692V315.076923h157.538462V0H0v315.076923h157.538462v630.153846h393.846153v78.769231h551.384616v-236.307692H551.384615v78.76923H236.307692V551.384615h315.076923v78.769231zM630.153846 472.615385h393.846154v78.76923H630.153846z m0 393.846153h393.846154v78.769231H630.153846zM78.769231 236.307692V78.769231h236.307692v157.538461z" ></path>
                </svg>
            </el-icon>
        </div>
        <div class="title">
            <template v-if="Array.isArray(title)">
                <el-space spacer="/" wrap>
                    <el-link v-for="it in title" :key="it" :type="it.type" :title="it.label" @click="clickTitle(it)">{{ trimStr(it.label,8) }}</el-link>
                </el-space>
            </template>
            <template v-else>
                {{ title }}
            </template>
        </div>
        <div class="right" style="margin-right: 20px">
            <template v-if="!moreActions || moreActions.length==0">
                <el-icon v-if="allowSearch" style="font-size: 20px; color: #409efc" @click="$emit('search-click')">
                    <Search />
                </el-icon>
                <el-icon v-if="allowAdd" style="margin-left: 10px; font-size: 20px; color: #409efc" @click="$emit('add-click')">
                    <Plus />
                </el-icon>
            </template>
            <el-dropdown v-else>
                <el-icon style="padding-top: 10px;font-size: 20px; color: #409efc; font-weight: bolder;">
                    <More />
                </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item icon="Plus" v-if="allowAdd" @click="$emit('add-click')">新增</el-dropdown-item>
                        <el-dropdown-item icon="Search" v-if="allowSearch"
                            @click="$emit('search-click')">检索</el-dropdown-item>
                        <el-dropdown-item v-for="it in moreActions" :divided="it.label=='-'" :icon="it.icon" :key="it" @click="$emit('action-click', it)">{{ it.label=="-"?"":it.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <MyFloatButton v-if="!visible">
        <el-button v-if="allowAdd" type="primary" :icon="Plus" circle @click="$emit('add-click')"></el-button>
        <el-button v-if="allowSearch" type="primary" :icon="Search" circle @click="$emit('search-click')"></el-button>
    </MyFloatButton>

    <el-backtop />
</template>

<script>
export default {
    name: "MyPageHeader"
}
</script>
<script setup>
import {  ref } from 'vue'
import { ArrowLeftBold, Search, Plus, CloseBold, Expand } from "@element-plus/icons-vue";
import store from "./store";
import MyFloatButton from "./MyFloatButton.vue";

const emit = defineEmits(["goback", "search-click", "add-click", "action-click","tree-click"]);
const props = defineProps({
    title: [Array,String],
    allowSearch: {
        type: Boolean,
        default: false,
    },
    allowAdd: {
        type: Boolean,
        default: false,
    },
    allowBack: {
        type: Boolean,
        default: true,
    },
    allowTree:{
        type:Boolean,
        default:false,
    },
    moreActions: Array
});

const visible = ref(store.showPageHeader != false);

visible.value = store.showPageHeader != false;

function clickTitle(lnk){
    if(typeof(lnk.click)=="function"){
        lnk.click(lnk);
    }else{
        location = lnk.url;
    }
};

function trimStr(str, maxlen){
    if (maxlen < 5) {
       maxlen = 5;
    }
    if(str && str.length>maxlen){
        return str.substring(0, maxlen-3)+"...";
    }
    return str;
}
</script>

<style scoped>
.page-header {
    width: 100%;
    min-height: 40px;
    border-bottom: 1px solid #eee;
    display: inline-flex;
    text-align: center;
    margin: 2px -6px 2px 6px;
}

.page-header .left {
    margin-top: auto;
    margin-bottom: auto;

}

.page-header .tree-icon {
    margin-left: 12px;
    margin-top: auto;
    margin-bottom: auto;

}


.page-header .right {
    margin-top: auto;
    margin-bottom: auto;
}

.page-header .title {
    flex: 1;
    margin-top: auto;
    margin-bottom: auto;
}

.floatAdd {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 44px;
    height: 44px;
    z-index: +1;
}

.floatSearch {
    position: fixed;
    top: 160px;
    right: 20px;
    width: 44px;
    height: 44px;
    z-index: +1;
}
</style>